import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  HomeOutlined,
  UserOutlined,
  ShoppingOutlined,
  FileTextOutlined,
  LogoutOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, Dropdown, Avatar, Breadcrumb } from 'antd';
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
import type { MenuProps } from 'antd';
import useAdminInfoStore from '@/store/adminInfoStore';

const { Header, Sider, Content } = Layout;

const Home: React.FC = () => {
  const { adminInfo, setAdminInfo, setToken } = useAdminInfoStore();
  const pathname = useLocation().pathname;
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();

  const headerItems: MenuProps['items'] = [
    // {
    //   key: 'profile',
    //   label: '个人信息',
    // },
    {
      key: 'switchRole',
      label: '切换角色',
      onClick: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('adminInfo');
        localStorage.removeItem('userInfo');
        setAdminInfo({} as any);
        setToken('');
        navigate('/login');
      },
    },
    {
      key: 'logout',
      label: '退出登录',
      icon: <LogoutOutlined />,
      onClick: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('adminInfo');
        localStorage.removeItem('userInfo');
        setAdminInfo({} as any);
        setToken('');
        navigate('/admin/login');
      },
      danger: true,
    },
  ];
  // 面包屑数组计算
  const breadcrumbItems = pathname
    .split('/')
    .slice(1)
    .map((item) => ({
      title: (() => {
        if (item === 'home') {
          return <Link to="/admin/home">首页</Link>;
        }
        if (item === 'user') {
          return <Link to="/admin/user">用户管理</Link>;
        }
        if (item === 'business') {
          return <Link to="/admin/business">商品管理</Link>;
        }
        if (item === 'article') {
          return <Link to="/admin/article">文章管理</Link>;
        }
        return '管理后台';
      })(),
    }));

  return (
    <Layout className="h-dvh">
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        className="shadow-md"
        style={{
          background: '#ffffff',
        }}
      >
        {/* Logo区域 */}
        <div className="h-16 bg-gradient-to-r from-emerald-800 via-emerald-700 to-emerald-600 overflow-hidden">
          {collapsed ? (
            <div className="flex items-center justify-center h-full">
              <span className="text-2xl font-bold text-white">菌</span>
            </div>
          ) : (
            <div className="flex items-center justify-center h-full px-4">
              <div className="text-[16px] font-bold text-white tracking-wider text-center leading-tight">
                <div>云南野生菌</div>
                <div>科普交易平台管理后台</div>
              </div>
            </div>
          )}
        </div>

        {/* 侧边菜单 */}
        <Menu
          mode="inline"
          defaultSelectedKeys={[pathname.split('/').pop() || 'home']}
          className="border-e-0 py-4"
          items={[
            {
              key: 'home',
              icon: <HomeOutlined />,
              label: '首页',
              onClick: () => navigate('/admin/home'),
            },
            {
              key: 'user',
              icon: <UserOutlined />,
              label: '用户管理',
              onClick: () => navigate('/admin/user'),
            },
            {
              key: 'business',
              icon: <ShoppingOutlined />,
              label: '商品管理',
              onClick: () => navigate('/admin/business'),
            },
            {
              key: 'article',
              icon: <FileTextOutlined />,
              label: '文章管理',
              onClick: () => navigate('/admin/article'),
            },
          ]}
        />
      </Sider>
      <Layout>
        {/* 顶部导航 */}
        <Header
          style={{ backgroundColor: '#ffffff' }}
          className="px-4 shadow-sm flex justify-between items-center"
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            className="w-16 h-16 text-lg hover:text-emerald-600"
          />
          <div className="flex items-center space-x-4">
            <span className="text-gray-600">{adminInfo.user_name}</span>
            <Dropdown
              menu={{ items: headerItems }}
              placement="bottomRight"
            >
              <Avatar
                style={{ backgroundColor: '#10b981', cursor: 'pointer' }}
                icon={<UserOutlined />}
              />
            </Dropdown>
          </div>
        </Header>
        {/* 面包屑区域 */}
        <div className="ml-5">
          <Breadcrumb
            items={breadcrumbItems}
            style={{ margin: '8px 0' }}
          />
        </div>
        {/* 内容区域 */}
        <Content className="m-3 mt-0 ">
          <div className="min-h-[280px] h-[calc(100vh-110px)] px-4 py-2 bg-white rounded-lg shadow-sm overflow-y-auto">
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Home;
